import React, { Component } from 'react'
import * as action from "../action/index.js"
import {connect} from "react-redux"
import {bindActionCreators} from "redux"
import Luo from "iscroll-luo"
import {Image,Lazyload} from "react-vant"
 class Pull extends Component {
  state = {
      ispull:""
  }
  ondown () { // 下拉刷新得方法
    this.props.getPullList("xiala")
  }
  onup () { // 上拉加载得方法
    this.props.getPullList("shangla")
  }
  // 避免过多无效请求，减少网络资源占用，// 防抖
 debounce = (timeout, fn) => {
      let _time = null
      return function () {
          let _arg = arguments
          clearTimeout(_time)
          _time = setTimeout(() => {
              fn.apply(this, _arg)
          }, timeout)
      }
  }
  componentDidMount(){
    this.props.getPullList()
  }
  goDatil(ind) {
      this.props.history.push(`/pulldetail/${ind}`)
  }
  render() {
    return (
      <div className='pullwrap'>
          <Luo id="luo" onDown={this.ondown.bind(this)} onUp={this.debounce(1000,this.onup.bind(this))}>
                {
                    this.props.pullArr&& this.props.pullArr.length? this.props.pullArr.map((item,index)=>{
                        return <div key={index} onClick={this.goDatil.bind(this,index)}>
                            <Image src={item.img} lazyload style={{width:"100px",height:"100px",marginTop:"15px"}}></Image>
                        </div>
                    }):""
                }
          </Luo>
      </div>
    )
  }
}
let mapSatetoProps = (state)=>{
    
    return {
        ...state.ShopReduer
    }
}
let mapDispatchToprops = (dispatch)=>bindActionCreators(action,dispatch)
export default connect(mapSatetoProps,mapDispatchToprops)(Pull)